<template>
  <div>
		<el-space>
			<el-button type="success" @click="add">添加护理级别</el-button>
		</el-space>
		<el-divider />
		<el-radio-group v-model="status" @change="getTable">
			<el-radio-button :value="1">启用</el-radio-button>
			<el-radio-button :value="2">停用</el-radio-button>
		</el-radio-group>
		<el-table :data="tableData">
			<el-table-column label="序号">
				<template #default="scope">
					<span>{{scope.$index + 1}}</span>
				</template>
			</el-table-column>
			<el-table-column label="级别名称" prop="name"></el-table-column>
			<el-table-column label="状态">
				<template #default="scope">
					<span>{{scope.row.status === 1 ? '启用' : '停用'}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="240px">
				<template #default="scope">
					<el-button type="success" size="small" @click="update(scope.row.id)">修改</el-button>
					<el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
					<el-button type="primary" size="small" @click="showItems(scope.row.id)">护理项目配置</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog
			v-model="editDialog.show"
			:title="editDialog.title"
			width="400px"
			:close-on-click-modal="false">
			<Edit v-model:show="editDialog.show" :urls="request_url" :id="editDialog.id" :getTable="getTable" v-if="editDialog.show" />
		</el-dialog>
		<el-dialog
			v-model="itemDialog.show"
			title="护理项目配置"
			width="800px">
			<Item v-if="itemDialog.show" v-model:show="itemDialog.show" :levelId="itemDialog.levelId" />
		</el-dialog>
	</div>
</template>
<script setup>
import { get, post } from '@/axios'
import { reactive, ref } from 'vue'
import Edit from './edit'
import { ElMessageBox } from 'element-plus'
import Item from './item'
const modelUrl = '/nurselevel'
const request_url = {
	list: modelUrl + '/list',
	del: modelUrl + '/delete',
	getById: modelUrl + '/getById',
	add: modelUrl + '/add',
	update: modelUrl + '/update',
	check: modelUrl + '/check'
}
const tableData = ref([])
const roomNo = ref('')
const status = ref(1)
const editDialog = reactive({
	show: false,
	title: '',
	id: null
})
const itemDialog = reactive({
	show: false,
	levelId: null
})
function getTable () {
	get(request_url.list, { status: status.value }, content => {
		tableData.value =content
	})
}
function search () {
	params.pageNo = 1
	params.roomNo = roomNo.value
	getTable()
}
function add () {
	editDialog.id = null
	editDialog.title = '添加护理级别'
	editDialog.show = true
}
function update(id) {
	editDialog.id = id
	editDialog.title = '修改护理级别'
	editDialog.show = true
}
function del(id) {
	ElMessageBox.confirm('确定要删除该护理级别吗？', '删除警告', {
		type: 'warning',
		confirmButtonText: '确定',
		cancelButtonText: '取消'
	}).then(() => {
		post(request_url.del, { id }, content => {
			getTable()
		})
	}).catch(() => {})
}
function showItems(id) {
	itemDialog.levelId = id
	itemDialog.show = true
}
getTable()
</script>

<style scoped lang="scss">
.el-pagination, .el-table {
	margin-top: 10px;
}
</style>